<template>
  <div class="CommunityPublicServiceInfo">
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>社区综合服务站（社区党群服务中心）</span>
      </div>
      <div class="remark">与文化活动站可叠加填报</div>
      <div
        class="content"
        v-if="info && info.serviceStationList && info.serviceStationList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.serviceStationList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span
            >社区居委会办公室：{{
              item.office ? item.office + '平方米' : ''
            }}</span
          >
          <span
            >服务大厅：{{
              item.serviceHall ? item.serviceHall + '平方米' : ''
            }}</span
          >
          <span
            >活动用房：{{ item.activity ? item.activity + '平方米' : '' }}</span
          >
          <span
            >警务室：{{
              item.policeStation ? item.policeStation + '平方米' : ''
            }}</span
          >
          <span
            >阅览室：{{
              item.readingRoom ? item.readingRoom + '平方米' : ''
            }}</span
          >
          <span
            >党群活动中心:{{ item.party ? item.party + '平方米' : '' }}</span
          >
          <span>其他：{{ item.other ? item.other + '平方米' : '' }}</span>
          <span>位置：{{ JSON.parse(item.location)[2] }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据" />-->
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>社区文化活动站</span>
      </div>
      <div class="remark">文化活动站与党群服务中心合建的,可估算</div>
      <div class="content">
        <div class="building-info-item">
          <span>是否与社区合建：{{ info?.hasCulture ? '否' : '是' }}</span>
        </div>
      </div>
      <div class="content" v-if="info && info.cultureList.length">
        <div
          class="building-info-item"
          v-for="(item, index) in info.cultureList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>街道养老服务中心或社区养老服务站(仅填位于本社区的)</span>
      </div>
      <div class="remark">
        社区内仅有街道服务中心的，仅需填报街道服务中心;中心与站点均有的,需分开项报
      </div>
      <div
        class="content special"
        style="font-size: 14px"
        v-if="info && info.communityOldList && info.communityOldList.length"
      >
        社区养老服务站
      </div>
      <div
        class="content"
        v-if="info && info.communityOldList && info.communityOldList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.communityOldList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>床位：{{ item.remark ? item.remark + '个' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
      <div
        class="content special"
        style="font-size: 14px"
        v-if="info && info.streetOldList && info.streetOldList.length"
      >
        街道养老服务中心
      </div>
      <div
        class="content"
        v-if="info && info.streetOldList && info.streetOldList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.streetOldList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>床位：{{ item.remark ? item.remark + '个' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>街道卫生服务中心或社区卫生服务站(仅填位于本社区的)</span>
      </div>
      <div class="remark">
        社区内仅有街道卫生服务中心的，仅需填报街道卫生服务中心;中心与站点均有的,需分开项报
      </div>
      <div
        class="content special"
        style="font-size: 14px"
        v-if="info && info.communitySafeList && info.communitySafeList.length"
      >
        社区卫生服务站
      </div>
      <div
        class="content"
        v-if="info && info.communitySafeList && info.communitySafeList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.communitySafeList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
      <div
        class="content special"
        style="font-size: 14px"
        v-if="info && info.streetSafeList && info.streetSafeList.length"
      >
        街道卫生服务中心
      </div>
      <div
        class="content"
        v-if="info && info.streetSafeList && info.streetSafeList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.streetSafeList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>社区食堂</span>
      </div>
      <div class="remark">与其他设施合建或混合使用时，可重复填报</div>
      <div
        class="content"
        v-if="info && info.dinnerHallList && info.dinnerHallList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.dinnerHallList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>日均服务人次：{{ item.average }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>幼儿园</span>
      </div>
      <div class="remark">所有幼儿园均需填报</div>
      <div
        class="content"
        v-if="info && info.childParkList && info.childParkList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.childParkList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>班额：{{ item.classType }}</span>
          <span>类型：{{ item.type }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>托育机构</span>
      </div>
      <div class="remark">面向0-3岁幼儿提供日常照料、看护等服务的机构</div>
      <div
        class="content"
        v-if="info && info.organizationList && info.organizationList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.organizationList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>班额：{{ item.classType }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>其他</span>
      </div>
      <div
        class="content"
        v-if="info && info.policeRoomList && info.policeRoomList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.policeRoomList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})
</script>

<style scoped lang="scss">
.CommunityPublicServiceInfo {
  padding: 15px 10px 15px 5px;
  overflow-y: auto;
  height: 100%;

  :deep(.el-descriptions__label) {
    display: inline-block;
    width: 102px;
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    span {
      font-size: 14px;
      line-height: 32px;
    }
  }

  .content.special {
    position: relative;
    margin-left: 12px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #27475f;

    &::before {
      content: ' ';
      position: absolute;
      width: 6px;
      height: 6px;
      background: #93d8f1;
      border-radius: 50%;
      left: 0;
      top: 50%;
    }
  }

  .title {
    margin-top: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      width: 3px;
      height: 18px;
      margin-right: 6px;
      background-color: #28b1e4;
      border-radius: 2px;
    }

    span {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .building-info-item {
    display: flex;
    flex-direction: column;
    padding: 11px 15px;
    background-color: rgba(249, 249, 252, 1);
    border-radius: 4px;
    margin-bottom: 12px;

    color: #717689;

    .position {
      color: RGBA(39, 71, 95, 1);
    }
  }
}
</style>
